<template>
  <div class="todo-list">
    <todo-list-itiem
      v-for="item in todos"
      :key="item.id"
      :todo-item="item"
      @change-state="
        (event) => {
          changeItem(item, event);
        }
      "
    ></todo-list-itiem>
  </div>
</template>

<script>
import TodoListItiem from "./TodoListItem.vue";
export default {
  components: {
    TodoListItiem,
  },
  props: ["todos"],

  setup() {
    const changeItem = (data, e) => {
      data.templeted = e.target.checked;

      console.log(data);
    };

    return {
      changeItem,
    };
  },
};
</script>

<style>
.todo-list {
  display: grid;
  row-gap: 14px;
}
</style>
